import { View } from "@tarojs/components";
import { Title, AbstractImage } from "@/components";
import { AboutSubPageShape } from "@/data/about/aboutTypes";
import style from "./index.module.scss";
import { navigateTo } from "@/utils/navigation";
import { ActionKeys, ActionNames, sendAction } from "@/utils/tracking";

type SubPageListingProps = {
  listData: AboutSubPageShape[];
};

const C27SubPageListing = ({ listData }: SubPageListingProps) => {
  const onItemClick = (id: number, title: string) => {
    sendAction(ActionNames.AboutUsContentPartClick, {
      [ActionKeys.AboutUsPartName]: title,
    });
    navigateTo(`pages/about-subpage/index?id=${id}`);
  };

  return (
    <View className={style["sub-page-listing"]}>
      {listData.map(({ id, title, introduction, thumbnail }) => {
        return (
          <View key={id} className={style.item}>
            <AbstractImage
              className={style.thumbnail}
              type="about-sub-page-list"
              src={thumbnail!}
            />
            <View
              className={style.texts}
              onClick={() => {
                navigateTo(`pages/about-subpage/index?id=${id}`);
              }}
            >
              <Title className={style.title}>{title}</Title>
              <View className={style["sub-title"]}>{introduction}</View>
              <View
                className={style["link-text"]}
                onClick={() => onItemClick(id, title)}
              >
                了解更多
              </View>
            </View>
          </View>
        );
      })}
    </View>
  );
};

export default C27SubPageListing;
